$(function () {
    var option5 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            itemWidth: 15,
            textStyle: {
                color: '#fff'
            },
            top: 15,
            right: 25,
            itemHeight: 15,
            data: ['已建议数', '未建议数'],
            right: 'right',
            orient: 'horizontal',
            icon: 'circle'
        },
        xAxis: {
            data: [
                '儿童青少年“明眸亮睛”工程',
                '“品质教育”校园提升工程',
                '全民健身提升工程',
                '“健康上虞”提升工程',
                '文化下乡工程',
                '食品安全提升工程',
                '养老扶弱工程',
                '城镇老旧小区综合改造提升工程',
                '美丽乡村公路建设工程',
                '城市治堵系列工程'
            ],
            splitLine: {
                show: false
            },
            axisLabel: {
                interval: 0,
                rotate: 25, //倾斜度 -90 至 90 默认为0
                margin: 2,
                textStyle: {
                    // fontWeight:"bolder",
                    color: '#fff'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        },
        yAxis: {
            name: '代表建议数',
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff', //左边线的颜色
                }
            },
        },
        series: [{
                name: '已建议数',
                type: 'bar',
                stack: '使用情况',
                data: [100, 120, 136, 110, 50, 20, 180, 160, 140, 130],
                itemStyle: {
                    normal: {
                        color: 'rgb(19, 108, 252)'
                    }
                }
            },
            {
                name: '未建议数',
                type: 'bar',
                stack: '使用情况',
                data: [90, 100, 128, 105, 42, 40, 20, 30, 40, 20],
                itemStyle: {
                    normal: {
                        color: 'rgb(44, 170, 254)'
                    }
                }
            }
        ]
    };
    var jdBox = echarts.init(document.getElementById('jdBox'));
    jdBox.setOption(option5);
    window.addEventListener('resize', function () {
        //适应div大小
        jdBox.resize();
    });
    $('.list li').on('click', function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');

        $('.contentTab').eq($('.list li').index(this)).addClass('active-1').siblings().removeClass('active-1');
    });
});